<template>
	<view class="mx-info-btn" @tap="onTap">
		<image class="btn-img" :src="img"></image>
		<text class="btn-title">{{name}}</text>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		props: {
			img: {
				type: String
			},
			
			name: {
				type: String
			},
			
			to: {
				type: String
			},
			
			// 是否跳转到 web url
			web: {
				type: Boolean,
				default: false
			},
			
			redirect: { 
				type: Boolean,
				default: false
			},
			
			tabCurrent: {
				type: Number,
				default: 0
			}
		},
		
		methods: {
			...mapMutations(['setTabCurrent']),
			onTap() {
				// if(this.web) {
				// 	window.location.href = this.to
				// 	return
				// }
				if(this.redirect) {
					this.setTabCurrent(this.tabCurrent)
					uni.redirectTo({
						url: this.to
					})
					return
				}
				
				uni.navigateTo({
					url: this.to
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/var.scss';
	.mx-info-btn{
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0 36rpx;
		.btn-img{
			width: 70rpx;
			height: 70rpx;
		}
		
		.btn-title{
			margin-top: 10rpx;
			font-size: 16px;
			font-family: $font-family;
		}
	}
</style>
